<template>
	<div class="goodsBox" @click="toDetails">
		<div class="imgBox">
			<sa-image size="80" :url="item.image" radius="8" />
		</div>
		<div class="goodsInfo sa-flex-col">
			<div class="goodsBox-title sa-line-2">{{ item.title }}</div>
			<div class="goodsBox-price sa-flex" v-if="item.price">
				<div class="label">采购价</div>
				<div class="text sa-line-1" style="color:#ED2828">￥{{ item.price.length > 1 ? item.price.join('~') : item.price[0] }}</div>
			</div>
			<div class="goodsBox-price sa-flex">
				<div class="label">月销量</div>
				<div class="text">{{ formatCharCount(item.sales) }}</div>
			</div>
			<div class="goodsInfo-tag ">
					<div class="tag-item" v-for="ser in  serviceList">
						{{ser.name}}</div>
			</div>
		</div>
		<slot name="btn">
			<el-button class="goodsBox-btn" color="#3768FA" type="primary" :disabled="item?.is_in == 1 " plain @click.stop="emits('onTap', item)">{{item?.is_in ==1 ? '已铺货':'一键铺货' }}</el-button>
		</slot>
	</div>
</template>
<script setup>
import { ref, reactive, watch, computed  } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter();
const props = defineProps({
	item: {
		type: Object,
		default: () => {
			return {}
		}
	}
})
const emits = defineEmits(['onTap', 'details'])
const serviceList = computed(()=>{
	if(!props.item.serviceList)return []
	return JSON.parse(props.item.serviceList)
})
function formatCharCount(num) {
	if (!Number(num)) return num;
	if (num >= 1e3 && num < 1e4) {
		num = (num / 1e3).toFixed(0) + '千+';
	} else if (num >= 1e4 && num < 1e7) {
		num = (num / 1e4).toFixed(0) + '万+';
	} else if (num >= 1e7) {
		num = (num / 1e7).toFixed(0) + '千万+';
	}
	return num; // 返回格式化后的数字
}
function toDetails() {
	emits('details', props.item)
}
</script>
<style lang="scss" scoped>
.goodsBox {
	height: 100%;
	padding-bottom: 10px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;

	.imgBox {
		width: 100%;
		padding: 100% 0 0;
		border-radius: 8px;
		position: relative;
		overflow: hidden;

		&>div {
			width: inherit !important;
			height: inherit !important;
		}

		.sa-image {
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
		}

		.sa-image,
		.el-image {
			width: inherit !important;
			height: inherit !important;
		}
	}
.goodsInfo{
	height: 100%;
	flex:1;
}

	.label {
		margin-right: 6px;
		font-family: Source Han Sans;
		min-width: 44px;
		font-size: 14px;
		font-weight: normal;
		line-height: normal;
		letter-spacing: normal;
		color: #9E9E9E;
	}

	.text {
		font-family: Source Han Sans;
		font-size: 14px;
		font-weight: normal;
		line-height: normal;
		letter-spacing: normal;
		color: #9E9E9E;
	}

	.goodsBox-title {
		margin-top: 4px;
	}

	.goodsBox-price {
		margin-top: 4px;

	}

	.goodsInfo-tag {
			display: flex;
			flex-wrap: wrap;
			// height: 24px;
			.tag-item {
				margin-bottom: 4px;
				margin-right: 4px;
				padding: 0 6px;
				height: 20px;
				border-radius: 4px;
				background: #F2F6FE;
				font-size: 12px;
				color: #3768FA;
			}
		}

	.goodsBox-btn {
		// width: 100%;
		// height: 30px;
		// border-radius: 10px;
		// margin-top: 6px;
		// background: rgba(216, 216, 216, 0);
		// box-sizing: border-box;
		// border: 2px solid #3768FA;
		// font-family: Source Han Sans;
		// font-size: 16px;
		// font-weight: 500;
		// line-height: normal;
		// letter-spacing: normal;
		// color: #3768FA;
	}
}
</style>